<template>
  <ul class="bw-design-node-senior-setup-list">
    <li class="senior-setup-item">
      <div class="handred" @click="nodeIfInofExpand = !nodeIfInofExpand">
        <span class="handred-title"> 条件节点 </span>

        <div class="handred-extra">
          <Icon
            class="bw-close-icon"
            :icon="
              nodeIfInofExpand
                ? 'ant-design:down-outlined'
                : 'ant-design:left-outlined'
            "
          />
        </div>
      </div>

      <div :class="['content', nodeIfInofExpand && 'content-expand']">
        <div class="content-item">
          <span class="label"> 是否是条件节点: </span>
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model:checked="curNodeIfInfo.visible"
          />
        </div>

        <div class="content-item">
          <span class="label"> 条件值来源: </span>
          <a-select
            class="input"
            placeholder="请选择条件值来源"
            :options="bwValueFromTypeList"
            v-model:value="curNodeIfInfo.conditionVarFrom"
            @change="onChangeNodeIfValueFrom"
          />
        </div>

        <div class="content-item node-senior-value">
          <span class="label"> 条件值配置: </span>
          <BwSeniorValue
            class="input"
            :info="curNodeIfInfo"
            :valueDataType="BwAttrDataTypeEnum.boolean"
            :valueFrom="curNodeIfInfo.conditionVarFrom"
            @change="onChangeNodeIfValue"
          />
        </div>
      </div>
    </li>

    <li class="senior-setup-item">
      <div class="handred" @click="nodeForInofExpand = !nodeForInofExpand">
        <span class="handred-title"> 循环节点 </span>

        <div class="handred-extra">
          <Icon
            class="bw-close-icon"
            :icon="
              nodeForInofExpand
                ? 'ant-design:down-outlined'
                : 'ant-design:left-outlined'
            "
          />
        </div>
      </div>

      <div :class="['content', nodeForInofExpand && 'content-expand']">
        <div class="content-item">
          <span class="label"> 是否是循环节点: </span>
          <a-switch
            checkedChildren="是"
            unCheckedChildren="否"
            v-model:checked="curNodeForInfo.visible"
          />
        </div>

        <div class="content-item">
          <span class="label"> 循环变量值来源: </span>
          <a-select
            class="input"
            placeholder="请选择条件值来源"
            :options="bwValueFromTypeList"
            v-model:value="curNodeForInfo.forVarFrom"
            @change="onChangeNodeForValueFrom"
          />
        </div>

        <div class="content-item node-senior-value">
          <span class="label"> 循环变量值配置: </span>
          <BwSeniorValue
            class="input"
            :info="curNodeForInfo"
            :valueDataType="BwAttrDataTypeEnum.array"
            :valueFrom="curNodeForInfo.forVarFrom"
            @change="onChangeNodeForValue"
          />
        </div>
      </div>
    </li>

    <li
      class="senior-setup-item"
      v-if="Array.isArray(curNodeSlotList) && curNodeSlotList.length"
    >
      <div class="handred" @click="nodeSlotExpand = !nodeSlotExpand">
        <span class="handred-title"> 节点插槽 </span>

        <div class="handred-extra">
          <Icon
            class="bw-close-icon"
            :icon="
              nodeForInofExpand
                ? 'ant-design:down-outlined'
                : 'ant-design:left-outlined'
            "
          />
        </div>
      </div>

      <div :class="['content', nodeSlotExpand && 'content-expand']">
        <ul class="bw-node-slot-list">
          <li
            v-for="item in curNodeSlotList"
            class="bw-node-slot-item"
            :key="getSlotCode(item)"
          >
            <span class="slot-name"> {{ getSlotName(item) }} </span>

            <span class="slot-info"> {{ getSlotType(item) }} </span>

            <a-switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              :checked="item.visible"
              @change="(v: boolean) => onSlotVisible(item, v)"
            />
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { useNodeSeniorSetup } from './util'

import BwSeniorValue from './coms/seniorValue/index.vue'
import { BwCustomComNodeAttrDataTypeEnum as BwAttrDataTypeEnum } from '@bitwit/base-com-render'

const {
  curNodeIfInfo,
  curNodeForInfo,
  curNodeSlotList,
  nodeSlotExpand,
  nodeIfInofExpand,
  nodeForInofExpand,
  bwValueFromTypeList,

  getSlotCode,
  getSlotName,
  getSlotType,
  onSlotVisible,
  onChangeNodeIfValue,
  onChangeNodeIfValueFrom,
  onChangeNodeForValue,
  onChangeNodeForValueFrom,
} = useNodeSeniorSetup()
</script>

<style lang="less" scoped>
.bw-design-node-senior-setup-list {
  width: 100%;
  height: calc(100% - 8px);

  .senior-setup-item {
    margin: 0 16px;
    border-radius: 5px;
    margin-bottom: 8px;
    width: calc(100% - 32px);
    border: 1px solid #e8e8e8;

    .handred {
      height: 30px;
      display: flex;
      padding: 0 8px;
      align-items: center;
      width: calc(100% - 16px);
      justify-content: space-between;
    }

    .content {
      height: 0;
      padding: 0 8px;
      overflow: hidden;
      width: calc(100% - 16px);
    }

    .content-expand {
      height: auto;
      padding: 8px;
      border-top: 1px solid #e8e8e8;

      .content-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        justify-content: flex-start;

        .label {
          width: 120px;
        }

        .input {
          flex: 1;
        }
      }

      .node-senior-value {
        align-items: flex-start;
        .label {
          line-height: 32px;
        }
      }

      .bw-node-slot-list {
        width: 100%;
        height: auto;

        .bw-node-slot-item {
          height: 30px;
          padding: 0 8px;
          display: inline-flex;
          align-items: center;
          width: calc(100% - 16px);
          justify-content: space-between;

          &:hover {
            cursor: pointer;
            color: #1677ff;
            border-radius: 3px;
            background-color: #0000001c;
          }

          .slot-name {
            flex: 1;
            flex-shrink: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .slot-info {
            flex-shrink: 0;
            margin: 0 16px;
          }
        }
      }
    }
  }
}
</style>
